單文件組件顧名思義就是一個 .vue 副檔名的文件，即為一個獨立組件

如何使用

.vue 是單文件組件獨有的副檔名，我們必須使用 Vue Loder編譯成一般的組件型態

這是一個典型的單文件組件，包含了三個最常用的區塊，除了這三個基本區塊，也可以有自定義的區塊，不過這邊先不討論，有興趣的朋友們，請自行參考官方網站上的說明囉

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
export default {
  data: function() {
    return {
      greeting: "Hello"
    };
  }
};
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

接著我們來看看這三個區塊分別負責什麼事情吧

<template>
這邊的內容其實就是我們 definition 物件裡的 template 屬性的字符串模板 (String templates)

<script>
這邊可以使用ES2015的 import 我們需要的 js 模組，最後記得 export 一個 definition Object 即可

這邊雖然可以執行任意 Javascript 程式，但不建議這麼做

<style>
組件的 css，我們可以加上 scoped屬性，來達成組件作用域的 css，或是 lang屬性來指定我們的 css 預處理器

好處

• 很明顯的單文件組件，把一個組件需要的結構(template)、資料狀態以及行為(script)、樣式(style)都封裝在 一個檔案中，這讓我們再維護修改和擴充功能上，都非常的方便，不會需要在成堆的資料夾裡面找檔案了
• 支持語法高亮提示，如果使用 template 屬性的字符串模板 (String templates)，他就是一整個字串，所以是不會有 IDE 套件支援的高亮語法的，這會增加我們寫程式的痛苦指數
• 更方便地重用，以及檔案管理